<template>
  <div>
    <!-- 轮播图 -->
    <film-swiper>
      <div class="swiper-slide" v-for="(item, index) in imgList" :key="index">
        <div class="swiper-image" :style="{ backgroundImage: `url(${item})` }"></div>
      </div>
    </film-swiper>
    <!-- 内容区 -->
    <film-header></film-header>
    <router-view></router-view>
  </div>
</template>

<script>
import FilmSwiper from '@/components/FilmSwiper.vue'
import FilmHeader from '@/components/FilmHeader.vue'
export default {
  components: {
    FilmSwiper,
    FilmHeader
  },
  data() {
    return {
      imgList: [
        "http://imgsou.dangbei.com/images/20000/e9/4618007.jpg!300",
        "http://imgsou.dangbei.com/images/yy/20190109/5c357219d9a56.jpg!300",
        "http://imgsou.dangbei.com/images/yy/20201228/5fe98075d2d59.jpg!300"
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.swiper-slide {
  .swiper-image {
    height: 200px;
    background-size: cover;
    background-position: center center;
  }
}
</style>